<template>
	<view class="content">
		<nav-bar :title="$t('設定')" leftIcon="left"></nav-bar>
		<!-- <view class="btn-item" @click="jumpQhyy"> -->
		<!-- <view class="title">
				{{$t('切換語言')}}
			</view> -->
		<!-- <view class="value">
				<span v-if="lang==='zh-Hant'">繁體中文</span>
				<span v-if="lang==='en'">English</span>
				<uni-icons type="right" size="15" color="#fff"></uni-icons>
			</view>
		</view> -->
		<view class="btn-item" @click="jumpQhyy">
			<view class="title">
				<span v-if="lang === 'zh-Hant'">繁體中文</span>
				<span v-if="lang === 'en'">English</span>
			</view>
			<view class="value">
				<uni-icons type="right" size="15" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="btn-item" @click="handleGywm">
			<view class="title">
				{{$t('關於我們')}}
			</view>
			<view class="value">
				<uni-icons type="right" size="15" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="btn-item">
			<view class="title">
				{{$t('版本號')}}
			</view>
			<view class="value">
				{{serveNum}}
				<!-- <uni-icons type="right" size="15" color="#fff"></uni-icons> -->
			</view>
		</view>		
		<view @click="loginOut" class="btn-sub">
			{{$t('退出登錄')}}
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		jump
	} from "@/utils/common.js"
	import i18n from '@/locale/index'
	import { axios, socketUrl, axiosLogin } from '@/service/request.js'
	let lang = ref('')
	let serveNum = ref(1)
	onShow( async() => {
		// lang = uni.getLocale()
		lang.value = uni.getStorageSync('lang')
		const res = await uni.getSystemInfo()
		serveNum.value = res.appVersion
	})

	const jumpQhyy = () => {
		uni.navigateTo({
			url: "/pages/changeLang/changeLang",
			animationType: "fade-in",
			animationDuration: 200,
		});
	}
	const range = reactive([{
			value: 'zh-Hant',
			text: '繁體中文'
		},
		{
			value: 'en',
			text: 'Enghist'
		}
	])

	function handleGywm() {
		uni.navigateTo({
			url: '/pages/gywm/gywm'
		})
	}

	function clickLeftUp() {
		uni.navigateTo({
			url: '/pages/my/my'
		})
	}
	//退出登录
async function loginOut() {
	await axios('user/userOutToken',{
		userId: uni.getStorageSync('setUserInfo').userId,
	})
		uni.removeStorage({
			key: 'setToken'
		})
		uni.removeStorage({
			key: 'setUserInfo'
		})
		uni.reLaunch({
			url: '/pages/login/login'
		})
		uni.showToast({
			title: `${i18n.global.t('退出登錄成功')}!`,
			icon: 'none',
		})
	}
</script>

<style lang="scss" scoped>
	.btn-item {
		width: 690rpx;
		height: 100rpx;
		background: #24232C;
		border-radius: 20rpx;
		padding: 0 24rpx 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 31rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.value {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.btn-sub {
		width: 690rpx;
		height: 90rpx;
		// background: linear-gradient(90deg, #5641DD, #B1A6FD);
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>